<template>
    <div class="divBox" >

      <div>
       <span style="font-size: 20px;font-weight: bold;margin-left: 20px">{{inspiration.title}}</span>
      </div>
      <br>

      <div class="div1">
        <el-avatar size="small" :src="inspiration.authorImg"></el-avatar>
        <span class="span" style="font-size: 10px">{{inspiration.author}}</span>
        <span  class="span1" style="font-size: 10px;color: rgba(0,0,0,0.4);">更新时间:{{inspiration.time}}</span>
      </div>
      <el-divider/>
        <br>
      <div>
        <quill-editor class="editor"
                      v-model="inspiration.details"
                      ref="myQuillEditor"
                      :options="editorOption"
                      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                      @change="onEditorChange($event)">
        </quill-editor>
      </div>


    </div>
</template>

<script>
import {queryOneById} from "@/api/inspiration";

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{'header': 1}, {'header': 2}],               // custom button values
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
  [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
  [{'direction': 'rtl'}],                         // text direction

  [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],

  [{'color': []}, {'background': []}],          // dropdown with defaults from theme
  [{'font': []}],
  [{'align': []}],
  ['link', 'image', 'video'],
  ['clean']                                         // remove formatting button
]
export default {
  name: "inspirationDetail",
  data(){
    return{
      id:1,
      inspiration:{},
      editorOption: {
        placeholder: '',
        theme: 'snow',  // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions,  // 工具栏
          }
        }
      }

    }
  }
,
  created(){
    this.id = this.$route.query.ids

  },
  mounted:function (){
    this.queryOne()
  },
  methods:{
    queryOne(){
      queryOneById(this.id).then(res=>{
       this.inspiration = res;


      })
    },
    onEditorBlur() {
    },
    onEditorFocus(event) {//获得焦点事件
      event.enable(false);
    },
    onEditorChange() {//内容改变事件
    }

  }

}
</script>

<style scoped>

.div1{
  position: relative;
}

.div1 .span{
  position: absolute;
  top: 10px;
  left: 45px;

}

.div1 .span1{
  position: absolute;
  top: 22px;
  left: 45px;

}

</style>
